{{ define "networkStats" }}
  <div class="col-md-4 responsive-border-right responsive-border-right-l">
    <div class="d-flex justify-content-between">
      <div class="p-2">
        <div class="mb-0"><i class="fas fa-history mr-2"></i><span class="text-secondary">Epoch</span></div>
        <h5 class="font-weight-normal mb-0"><span data-toggle="tooltip" data-placement="top" title="The most recent epoch" v-html="addCommas(page.current_epoch)"></span> / <span data-toggle="tooltip" data-placement="top" title="The most recent finalized epoch" v-html="addCommas(page.current_finalized_epoch)"></span></h5>
      </div>
      <div class="text-right p-2">
        <div class="mb-0"><i class="fas fa-cube mr-2"></i><span class="text-secondary">Slot</span></div>
        <h5 class="font-weight-normal mb-0">
          <span data-toggle="tooltip" data-placement="top" title="The most recent slot" v-html="addCommas(page.current_slot)"></span>
        </h5>
      </div>
    </div>
  </div>
  <div class="col-md-4 responsive-border-right responsive-border-right-l">
    <div class="d-flex justify-content-between">
      <div class="p-2">
        <div class="mb-0"><i class="fas fa-user-shield mr-2"></i><span class="text-secondary">Active Validators</span></div>
        <h5 class="font-weight-normal mb-0">
          <span data-toggle="tooltip" data-placement="top" title="The number of currently active validators" v-html="addCommas(page.active_validators)"></span>
        </h5>
      </div>
      <div class="text-right p-2">
        {{ if eq .EnteringValidators 0 }}
          {{ if .ElectraHasHappened }}
            <div class="mb-0">
              <span data-toggle="tooltip" data-placement="top" title="Currently there are no pending Validators (churn limit is {{ formatClCurrency .ValidatorsPerEpoch config.Frontend.MainCurrency 0 true false false false }} per epoch or {{ formatClCurrency .ValidatorsPerDay config.Frontend.MainCurrency 0 true false false false }} per day with {{ .StakedEther }} total {{ config.Frontend.MainCurrency }} staked.)"><i class="fas fa-sign-in-alt mr-2"></i><span class="text-secondary">Joining</span> / <i class="fas fa-sign-out-alt mr-2"></i><span class="text-secondary">Leaving</span></span>
            </div>
          {{ else }}
            <div class="mb-0"><span data-toggle="tooltip" data-placement="top" title="Currently there are no pending Validators (churn limit is {{ .ValidatorsPerEpoch }} per epoch or {{ .ValidatorsPerDay }} per day with {{ .ActiveValidators }} validators)">Pending Validators</span></div>
          {{ end }}
        {{ else }}
          {{ if .ElectraHasHappened }}
            <div class="mb-0">
              <span data-toggle="tooltip" data-placement="top" title="It should take at least {{ .NewDepositProcessAfter }} for a new deposit to be processed and an associated validator to be activated (churn limit is {{ formatClCurrency .ValidatorsPerEpoch config.Frontend.MainCurrency 0 true false false false }} per epoch or {{ formatClCurrency .ValidatorsPerDay config.Frontend.MainCurrency 0 true false false false }} per day with {{ .ActiveValidators }} total {{ config.Frontend.MainCurrency }} staked.)"><i class="fas fa-sign-in-alt mr-2"></i><span class="text-secondary">Joining</span> / <span class="text-secondary">Leaving</span><i class="fas fa-sign-out-alt ml-2"></i></span>
            </div>
          {{ else }}
            <div class="mb-0"><span data-toggle="tooltip" data-placement="top" title="It should take at least {{ .NewDepositProcessAfter }} for a new deposit to be processed and an associated validator to be activated (churn limit is {{ .ValidatorsPerEpoch }} per epoch or {{ .ValidatorsPerDay }} per day with {{ .ActiveValidators }} validators)">Pending Validators</span></div>
          {{ end }}
        {{ end }}
        <h5 class="font-weight-normal mb-0">
          {{ if .ElectraHasHappened }}
            <span data-toggle="tooltip" data-placement="top" title="{{ .EnteringValidatorsBalance }} {{ config.Frontend.MainCurrency }} currently waiting to enter the active validator set and {{ .EnteringValidatorTopup }} waiting to be added to existing validators" v-html="shortBalance(page.entering_balance)"></span>
            / <span data-toggle="tooltip" data-placement="top" title="{{ .ExitingValidatorsBalance }} currently waiting to exit the active validator set" v-html="shortBalance(page.exiting_validators_balance)"></span>
          {{ else }}
            <span data-toggle="tooltip" data-placement="top" title="The number of validators currently waiting to enter the active validator set" v-html="addCommas(page.entering_validators)"></span>
            / <span data-toggle="tooltip" data-placement="top" title="The number of validators currently waiting to exit the active validator set" v-html="addCommas(page.exiting_validators)"></span>
          {{ end }}
        </h5>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="d-flex justify-content-between">
      <div class="p-2">
        <div class="mb-0"><i class="fas fa-coins mr-2"></i><span class="text-secondary">Staked {{ config.Frontend.MainCurrency }}</span></div>
        <h5 class="font-weight-normal mb-0">
          <span data-toggle="tooltip" data-placement="top" title="The sum of all effective balances" v-html="addCommas(page.staked_ether)"></span>
        </h5>
      </div>
      <div class="text-right p-2">
        <div class="mb-0"><i class="fas fa-wallet mr-2"></i><span class="text-secondary">Average Balance</span></div>
        <h5 class="font-weight-normal mb-0">
          <span data-toggle="tooltip" data-placement="top" title="The average current balance of all validators staked" v-html="addCommas(page.average_balance)"></span>
        </h5>
      </div>
    </div>
  </div>
{{ end }}
